<template>
  <div>
    <h2>简易加法计算器</h2>
    <div>
      <input type="button" value="-" @click="deHandle({m:5})" />
      <span>{{ num }}</span>
      <input type="button" value="+" @click="addHandle" />
    </div>

    <!--
      需求：这个数字加到130就不在往上加了，上面的数字继续往上加，由于这两个数字用的是同一个计算属性，

            所有这个需求实现不了，我们可以通过getters计算状态来实现这个需求
    -->
    <span>{{ num2 }}</span>

  </div>
</template>

<script>

  //导入vuex，通过对象的解构赋值使用vuex的辅助函数
  import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

  export default{

    computed:{
      num(){
        return this.$store.state.count;
      },
      num2(){
        return this.$store.getters.filterCount;
      }
    },

    /*computed:mapState({
     num(state){
     return state.count;
     },
     num:'count'
     }),
     //mapState也可以接收一个数组
     computed:mapState([count:'count']),//渲染的位置改成count即可*/

    // computed:{

    //   otherComputed(){

    //     return 'other'

    //   },

      //使用辅助函数mapState,通过扩展运算符在计算属性中扩展mapState函数，这样计算属性中可以定义其它的属性
      // ...mapState({

      //   num:'count'

      // }),

      //使用辅助函数mapGetters
    //    ...mapGetters({

    //      num2:'filterCount'

    //    })

    // },

    methods:{

      /*addHandle(){
        /!*
        * 点击的时候，提交一个mutation  addIncrement用来改变状态
        *
        * 类似于事件处理函数，addIncrement是一个事件，后面的事件处理函数在我们commit一个mutation
        * 的时候执行
        *
        * *!/
        //this.$store.commit("addIncrement",5);//提交的时候还可以传递参数，多个参数写成对象的形式

        /!*this.$store.commit("addIncrement",{
          n:5
        });
         *!/

        //提交一个action，完成异步操作之后，然后再由action提交mutation去改变状态

        this.$store.dispatch("addAction");

      },
      deHandle(){

        //this.$store.commit("deIncrement");

        //提交的另一种形式,m相当与第二个参数
        this.$store.commit({

          type:'deIncrement',

          m:5

        })
      }
      */

      //使用mapActions辅助函数
      ...mapActions({

        addHandle:'addAction'

      }),

      //使用mapMutations辅助函数
       ...mapMutations({

        //当我们要传递参数的时候把参数放在deHandle(参数)中传递过去
         deHandle:'deIncrement'

       }),


    }

  }

</script>
<style>

</style>
